<!--
 * @Author: your name
 * @Date: 2021-04-21 11:09:19
 * @LastEditTime: 2021-04-21 14:48:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue03-demo\src\views\RefView.vue
-->
<template>
  <SuspenseWithErrror>
    <template #error="{ err }">
      {{ err }}
    </template>
    <template #default>
      <User />
    </template>
    <template #fallback>
      loading
    </template>
  </SuspenseWithErrror>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  watchEffect,
  toRefs,
  onMounted,
  onUpdated
} from 'vue'
import User from '@/components/User.vue'
import SuspenseWithErrror from '@/components/SuspenseWithErrror.vue'
const utils = () => {
  // reactive >> 深转换响应式副本，可以对变量进行设置 如 a='xx'
  // readOnly >> 创建只读对象
  // ref >> 只能通过value进行设置 如 a.value='xx'
  // toRefs >> 将保留与源对象的响应式关联
  const state = reactive({
    x: 0,
    y: 0
  })
  return toRefs(state)
}
export default defineComponent({
  components: {
    User,
    SuspenseWithErrror
  },
  setup () {
    const { x, y } = utils()
    setTimeout(() => {
      x.value = 1
      y.value = 4
    }, 2000)
    const title = ref('hello vue3')
    const isShow = ref(false)
    const state = reactive({
      isShow: false
    })

    onMounted(() => {
      console.log('onMounted :>> ')
    })

    onUpdated(() => {
      console.log('x.value :>> ', x.value)
      console.log('y.value :>> ', y.value)
    })

    watchEffect(() => {
      console.log('isShow.value :>> ', isShow.value)
      console.log('state.value :>> ', state.isShow)
    })

    setTimeout(() => {
      title.value = 'changed'
      isShow.value = true
      state.isShow = true
    }, 1000)

    return {
      title,
      x,
      y
    }
  }
})
</script>

<style>

</style>
